<template>
  <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1" style="text-align: left;">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Element Plus组件学习</span>
          </template>
          <el-sub-menu index="1-1">
            <template #title>基础组件</template>
            <el-menu-item index="1-1-1"><RouterLink to="/button-demo">Button按钮</RouterLink></el-menu-item>
          </el-sub-menu>
        </el-sub-menu>

        <el-sub-menu index="2" style="text-align: left;">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Gis地图</span>
          </template>
          <el-sub-menu index="2-1">
            <template #title>Mapbox</template>
            <el-menu-item index="2-1-1"><RouterLink to="/mapbox-index">Mapbox示例</RouterLink></el-menu-item>
          </el-sub-menu>
        </el-sub-menu>



        <!-- <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item> -->
      </el-menu>
</template>
<script setup>
import {ref,reactive} from "vue"
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}



</script>
<style lang="scss" scoped>




</style>
